<template>
  <view v-if="resData.avatar" class="vip">
    <view class="content">
      <view class="info">
        <image class="info-left" :src=resData.avatar mode=""></image>
        <view class="info-right " :class="resData.invite_vip_end ==''?'info-onright':'info-right'">
          <view class="name exceedingEllipsis">
            {{resData.nickname}}
          </view>
          <text class="time" v-if="resData.invite_vip_end!=''">
            会员有效期：{{resData.invite_vip_end}}
          </text>
        </view>
      </view>
      <view class="vipNews ">
        <view class="vipNews-left">
          <text class="title">
            招标会员
          </text>
          <text class="icon"></text>
          <text class="tips">会员权益说明</text>
        </view>
        <view class="vipNews-right">
          <view class="price">
            ￥<text class="num">{{resData.invite_price}}</text>/年
          </view>
          <view @click="onRenew" class="renew">
            {{resData.invite_vip==1?'续费':'立即开通'}}
          </view>
        </view>
      </view>
    </view>
    <!-- 			<image  :style="{'height':  'calc('+ screenHeight  +'px' +' ' + '-' +' ' +'306rpx)'}" style="margin-top:40rpx;" class="bg"
			src="/static/images/my/vip-bg.png" mode=""></image> -->
    <!-- <u-parse style="height: 100%;" :content="resData.invite_content"></u-parse> -->
    <rich-text :nodes="resData.invite_content"></rich-text>

    <payPop ref="payPop" @payBack="payBack"></payPop>
  </view>
</template>

<script>
import api from '@/api/index.js';
import payPop from '../payPop.vue';
export default {
  components: {
    payPop
  },
  data() {
    return {
      screenHeight: '',
      show: false,
      safeAreaBottom: uni.getStorageSync('safeAreaBottom'),
      formData: {
        total_money: 199,
        actual_money: 199,
        payment: 'wxpay',
        type: 1,
        terminal: uni.getSystemInfoSync().platform
      },
      resData: {},
      isVip: false
    }
  },
  onLoad() {
    const result = uni.getSystemInfoSync();
    let safeAreaBottom = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().safeArea.height;
    this.screenHeight = uni.getStorageSync('screenHeight') - safeAreaBottom;
    this.getData();
  },
  methods: {
    onRenew() {
      this.$refs.payPop.open({
        type: 3,
        total_money: this.resData.invite_price,
        actual_money: this.resData.invite_price
      });
    },
    payBack(e) {
      console.log('支付完成')
      this.formData = {
        ...this.formData,
        ...e
      };
      this.getData();
      this.isVip = true;

    },
    getData() {
      api.base.getInviteInfo().then(res => {
        console.log('会员信息', res.data)
        this.resData = res.data;
        this.resData.invite_content = res.data.invite_content.replace(new RegExp('src="', 'g'), `style="max-width:100%!important;" src="`);

        let userinfoobj = uni.getStorageSync('userinfo');
        userinfoobj.invite_vip = res.data.invite_vip
        uni.setStorageSync('userinfo', userinfoobj);

      })
    },
    // createPay (){
    // 	  // console.log(this.formData)
    // 	  // return;
    // 	api.base.commonPay(this.formData).then(res => {
    // 		console.log(res.data.number)
    // 		this.pay(res.data.number);
    // 	})
    // },
    // pay(number){
    // 	api.base.commonPayCall({number}).then(res => {
    // 		uni.showToast({
    // 			icon:'none',
    // 			title:'支付成功',
    // 			duration:2000
    // 		});

    // 	})

    // }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .uni-select {
  border: none !important;
  border-bottom: none !important;
}

.vip {
  background: #ffffff;
  .content {
    position: relative;
    width: 750rpx;
    height: 346rpx;
    background: #000000;
    padding: 40rpx;
    box-sizing: border-box;
    margin-bottom: 64rpx;
    .info {
      display: flex;
      align-items: flex-start;

      &-left {
        width: 108rpx;
        height: 108rpx;
        border-radius: 50%;
      }

      &-right {
        width: 538rpx;
        display: flex;
        flex-direction: column;
        margin-left: 24rpx;

        .name {
          height: 42rpx;
          margin-top: 14rpx;
          font-size: 30rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #ffffff;
          line-height: 35rpx;
        }

        .time {
          margin-top: 8rpx;
          height: 30rpx;
          font-size: 22rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 26rpx;
        }
      }
      &-onright {
        display: flex;
        justify-content: center;
        margin-left: 24rpx;
        height: 108rpx;
      }
    }

    .vipNews {
      position: absolute;
      z-index: 99;
      top: 180rpx;
      width: 670rpx;
      height: 214rpx;
      padding: 0 36rpx;
      box-sizing: border-box;
      background: linear-gradient(90deg, #f6e4d0 0%, #debc99 100%);
      box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(219, 171, 137, 0.16);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      border-image: linear-gradient(
          138deg,
          rgba(244, 223, 198, 1),
          rgba(244, 223, 198, 0.6),
          rgba(244, 223, 198, 1)
        )
        1 1;
      display: flex;
      justify-content: space-between;

      &-left {
        display: flex;
        flex-direction: column;
        margin-top: 48rpx;

        .title {
          height: 56rpx;
          font-size: 40rpx;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: #333333;
          line-height: 47rpx;
        }

        .icon {
          width: 78rpx;
          height: 6rpx;
          background: linear-gradient(
            90deg,
            #c8906a 0%,
            rgba(236, 205, 181, 0) 100%
          );
        }

        .tips {
          height: 40rpx;
          margin-top: 16rpx;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #666666;
          line-height: 33rpx;
        }
      }

      &-right {
        .price {
          margin-top: 40rpx;
          display: flex;
          align-items: flex-end;
          height: 56rpx;
          font-size: 24rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          justify-content: center;

          .num {
            font-size: 40rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #333333;
          }
        }

        .renew {
          width: 176rpx;
          height: 64rpx;
          margin-top: 10rpx;
          background: #333333;
          box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(51, 51, 51, 0.16);
          border-radius: 60rpx 60rpx 60rpx 60rpx;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #edd5bc;
          line-height: 64rpx;
          text-align: center;
        }
      }
    }
  }

  .bg {
    width: 100%;
  }

  .popCont {
    width: 750rpx;
    background: #ffffff;
    padding: 48rpx 48rpx 10rpx 48rpx;
    box-sizing: border-box;

    .title {
      height: 52rpx;
      font-size: 34rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 51rpx;
    }

    .payNews {
      flex-direction: column;
      margin: 24rpx auto;
      width: 654rpx;
      height: 216rpx;
      background: rgba(255, 37, 68, 0.06);

      .word {
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
        line-height: 42rpx;
      }

      .money {
        height: 78rpx;
        font-size: 36rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #ff2544;
      }

      text {
        font-size: 56rpx;
        font-family: PingFang SC-Heavy, PingFang SC;
        font-weight: 800;
        color: #ff2544;
      }
    }

    .payType {
      width: 654rpx;
      height: 56rpx;
      padding-top: 24rpx;
      border-top: 2rpx solid rgba(0, 0, 0, 0.03);

      &-left {
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
      }

      &-right {
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #999999;

        image {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }

    .popBtn {
      width: 686rpx;
      height: 88rpx;
      margin-top: 160rpx;
      background: #6d0cf7;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
  }
}
</style>